<template>
	<view>
		<u-sticky><u-tabs :list="list" :is-scroll="false" :current="current" @change="sectionChange"></u-tabs></u-sticky>
		<view v-if="current == 0">
			<view class="wrap">
				<u-row justify="space-between">
					<u-col span="6" text-align="center">
						<view class="demo-layout weikaishi2 u-line-1 u-m-t-14">
							<span v-html="warehouseName"></span>
						</view>
					</u-col>
					<u-col span="6" text-align="center">
						<view class="demo-layout weikaishi u-line-1 u-m-t-14" @click="xuanzecangku()">
							<u-icon name="search" color="#2b85e4" label-color="#2b85e4" size="35" label="选择仓库"></u-icon>
						</view>
					</u-col>
				</u-row>
				<u-row justify="space-between">
					<u-col span="6">
						<view class="demo-layout2 bg-purple">
							<u-row justify="space-between">
								<u-col span="12">
									<view class="u-line-1 u-m-t-10">
										<u-icon name="https://z3.ax1x.com/2021/07/19/WJFqj1.png" color="#2b85e4" size="52"></u-icon>
									</view>
								</u-col>
								<u-col span="12" class="weikaishi3">
									<view class="u-line-1 u-m-t-4">
										<span>商品总量：</span>
									</view>
								</u-col>
								<u-col span="12" class="weikaishi2">
									<view class="u-line-1 u-m-t-4">
										<span v-html="totalNum"></span>
									</view>
								</u-col>
							</u-row>
						</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout2 bg-purple">
							<u-row justify="space-between">
								<u-col span="12">
									<view class="u-line-1 u-m-t-10">
										<u-icon name="https://z3.ax1x.com/2021/07/19/WJkZE8.png" color="#2b85e4" size="50"></u-icon>
									</view>
								</u-col>
								<u-col span="12" class="weikaishi3">
									<view class="u-line-1 u-m-t-4">
										<span>体积总量：</span>
									</view>
								</u-col>
								<u-col span="12" class="weikaishi2">
									<view class="u-line-1 u-m-t-4">
										<span v-html="totalStockVolume+'m³'"></span>
									</view>
								</u-col>
							</u-row>
						</view>
					</u-col>
				</u-row>
				<u-row justify="space-between">
					<u-col span="12">
						<view class="demo-layout3 bg-purple">
							<u-row justify="space-between">
								<u-col span="12" class="weikaishi2">
									<view class="u-line-1 u-m-t-14">
										<span>商品总量占比</span>
									</view>
								</u-col>
							</u-row>
							<u-row justify="space-between">
								<u-col span="12" class="weikaishi3">
									<view class="charts-box">
									  <qiun-data-charts
										type="pie"
										:chartData="chartData"
										background="none"
									  />
									</view>
								</u-col>
							</u-row>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view v-if="current == 1">
			<view class=" u-p-r-30 u-p-l-30 u-m-t-20">
				<u-row>
					<u-col span="11" text-align="center">
							<u-search placeholder="输入商品编号或名称搜索" :clearabled="true" v-model="keyword" border-color="#606266" @custom="search" @search="search"></u-search>
					</u-col>
					<u-col span="1" text-align="center" @click="scang()">
						<view class="u-m-t-14 weikaishi2">
							<u-icon name="scan" color="#2b85e4" size="43"></u-icon>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class=" u-p-r-30 u-p-l-30 u-m-t-20" >
				<u-row>
					<u-col span="11" text-align="center">
							<u-search placeholder="输入库位编号" :clearabled="true" v-model="keyword2" border-color="#606266" @custom="search2" @search="search2"></u-search>
					</u-col>
					<u-col span="1" text-align="center" @click="scan()">
						<view class="u-m-t-14 weikaishi2">
							<u-icon name="scan" color="#2b85e4" size="43"></u-icon>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class=" u-p-r-30 u-p-l-30 u-m-t-20" >
					<u-input type="select" @click="getp()" placeholder="选择位置"/>
			</view>
			
			<u-card padding="16" v-if="listtype == 'goods'">
				<view class="" slot="head">
					<view class="wrap">
						<u-row>
							<u-col span="1" text-align="center">
								<view class="u-line-1 u-m-t-8">
									<u-icon name="https://z3.ax1x.com/2021/07/19/WJFqj1.png" color="#2b85e4" size="35"></u-icon>
								</view>
							</u-col>
							<u-col span="10">
								<view class="weikaishi2">
									<span v-html="goodsSum.goodsNumber+'-'+goodsSum.goodsName"></span>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-col span="6" text-align="center">
								<view class="u-line-1 weikaishi3">
									<span>总数量</span>
								</view>
							</u-col>
							<u-col span="6" text-align="center">
								<view class="u-line-1 weikaishi3">
									<span>总体积</span>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-col span="6" text-align="center">
								<view class="weikaishi">
									<span v-html="goodsSum.totalNum"></span>
								</view>
							</u-col>
							<u-col span="6" text-align="center">
								<view class="weikaishi">
									<span v-html="goodsSum.totalStockVolume+'m³'"></span>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-col span="6" text-align="center" v-if="goodsSum.xianggui">
								<view class="weikaishi">
									<span v-html="'换算：'+goodsSum.xianggui"></span>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view class="" slot="body">
					<view class="wrap">
						<u-row>
							<u-col span="6" text-align="center">
								<view class="weikaishi u-line-1 u-m-t-10">
									<span>位置</span>
								</view>
							</u-col>
							<u-col span="3" text-align="center">
								<view class="weikaishi u-line-1 u-m-t-10">
									<span>数量</span>
								</view>
							</u-col>
							<u-col span="3" text-align="center">
								<view class="weikaishi u-line-1 u-m-t-10">
									<span>换算</span>
								</view>
							</u-col>
						</u-row>
						<u-row v-for="(item,index) in findgoodslist" :key="index">
							<u-col span="6" text-align="center">
								<view class="u-m-t-10 weikaishi4">
									<span>{{item.warehouseName+item.areaName+item.positionNumber}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="center">
								<view class="u-m-t-10 weikaishi4 yiwancheng">
									<span>{{item.totalNum}}</span>
								</view>
							</u-col>
							<u-col span="3" text-align="center" v-if="item.xianggui">
								<view class="u-m-t-10 weikaishi4">
									<span>{{item.xianggui}}</span>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</u-card>
			
			<u-card padding="16" v-if="listtype == 'weizhi'">
				<view class="" slot="head">
					<view class="wrap">
						<u-row>
							<u-col span="1" text-align="center">
								<view class="u-line-1 u-m-t-8">
									<u-icon name="https://z3.ax1x.com/2021/07/19/WJkZE8.png" color="#2b85e4" size="35"></u-icon>
								</view>
							</u-col>
							<u-col span="10">
								<view class="weikaishi2" v-if="positionId != '' || keyword2 != ''">
									<span v-html="goodsSum.warehouseName+goodsSum.areaName+goodsSum.positionNumber"></span>
								</view>
								<view class="u-line-1 weikaishi2" v-if="areaId != ''">
									<span v-html="goodsSum.warehouseName+goodsSum.areaName"></span>
								</view>
								<view class="u-line-1 weikaishi2" v-if="warehouseId2 != ''">
									<span v-html="goodsSum.warehouseName"></span>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-col span="6" text-align="center">
								<view class="u-line-1 weikaishi3">
									<span>商品总数</span>
								</view>
							</u-col>
							<u-col span="6" text-align="center">
								<view class="u-line-1 weikaishi3">
									<span>总体积</span>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-col span="6" text-align="center">
								<view class="u-line-1 weikaishi">
									<span v-html="goodsSum.totalNum"></span>
								</view>
							</u-col>
							<u-col span="6" text-align="center">
								<view class="u-line-1 weikaishi">
									<span v-html="goodsSum.totalStockVolume+'m³'"></span>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-col span="6" text-align="center" v-if="goodsSum.xianggui">
								<view class="weikaishi">
									<span v-html="'换算：'+goodsSum.xianggui"></span>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view class="" slot="body">
					<view class="wrap" v-for="(item,index) in findgoodslist" :key="index">
						<u-row>
							<u-col span="12" text-align="left">
								<view class="weikaishi u-m-t-10">
									<span>{{item.goodsNumber}}-{{item.goodsName}}</span>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-col span="6" text-align="left">
								<view class="yiwancheng weikaishi4">
									<span>数量：{{item.totalNum}}</span>
								</view>
							</u-col>
							<u-col span="6" text-align="left">
								<view class="weikaishi4">
									<span>换算：{{item.xianggui}}</span>
								</view>
							</u-col>
						</u-row>
						<u-row>
							<u-col span="12" text-align="center">
								<view class="jiange">
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</u-card>
		</view>
		
		<u-popup v-model="popupShow2" mode="center" closeable width="550rpx" height="600rpx" border-radius="10">
			<view class=" u-p-r-30 u-p-l-30 u-m-t-20" style="margin-top: 40rpx;">
				<u-search placeholder="输入商品编号或名称搜索" :clearabled="true" v-model="keyword" border-color="#606266" @custom="search" @search="search"></u-search>
			</view>
			<view class="wrap">
				<u-row v-for="item in glist" :key="item.id" @click="xuanzegoods(item)">
					<u-col span="12" text-align="center">
						<view class="u-m-t-10 weikaishi lanse">
							<span>{{item.goodsNumber}}-{{item.goodsName}}</span>
						</view>
					</u-col>
				</u-row>
			</view>
		</u-popup>
		
		<view>
			<u-select v-model="popupShow" :list="wlist" @confirm="definexuanzecangku"></u-select>
		</view>
		<view>
			<u-select v-model="popupShow3" mode="mutil-column-auto" :list="plist" @confirm="confirm"></u-select>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '整体库存'
					}, 
					{
						name: '详细数据'
					}
				],
				current: 1,
				chartData:{
				  categories:[],
				  series:[
					{
						"data": []
					}],
				},
				popupShow:false,
				popupShow2:false,
				popupShow3:false,
				wlist:[],
				plist:[],
				glist:[],
				warehouseId:'',
				warehouseName:'',
				totalStockVolume:'',
				totalNum:'',
				keyword:'',
				keyword2:'',
				goodsId:'',
				listtype:'',
				goodsSum:{},
				findgoodslist:[],
				warehouseId2:'',
				areaId:'',
				positionId:'',
				flex:'',
			};
		},
		onLoad() {
			//#ifdef H5 || APP-PLUS
			this.flex = 'u-flex'
			//#endif
			this.$http.post('/rest/storage/Warehouselist',{
			},{
				params: {
				},
				header: {
					'Authorization' :uni.getStorageSync('token'),
				}
			}).then(res => {
				if(res.data.data.length > 0){
					this.warehouseId = res.data.data[0].id
					this.warehouseName = res.data.data[0].warehouseName
					for(let item1 of res.data.data) {
						let obj = {}
						obj.value = item1.id
						obj.label = item1.warehouseName
						this.wlist.push(obj)
					}
					this.refresh()
				}
			})
			this.$http.post('/rest/storage/getWarehouselist2',{
			},{
				params: {},
				header: {
					'Authorization' :uni.getStorageSync('token'),
				}
			}).then(res => {
				this.plist = res.data.data
			})
		},
		methods: {
			scan(){
				let that = this
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.keyword2 = res.result
						that.search2()
					}
				});
			},
			scang(){
				let that = this
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						that.keyword = res.result
						that.search()
					}
				});
			},
			confirm(e) {
				this.goodsId = ''
				this.warehouseId2 = ''
				this.areaId = ''
				this.positionId = ''
				this.keyword2 = ''
				if(e[2].value != ''){
					this.positionId = e[2].value
				} else if(e[1].value != ''){
					this.areaId = e[1].value
				} else {
					this.warehouseId2 = e[0].value
				}
				this.findGoodsSum()
				this.findGoodsList()
				this.listtype = 'weizhi'
			},
			getp(){
				this.popupShow3 = true
			},
			findGoodsList(){
				this.$http.post('/rest/toolStorageStock/findGoodsListBySpec',{
				},{
					params: {
						goodsId:this.goodsId,
						warehouseId:this.warehouseId2,
						areaId:this.areaId,
						positionId:this.positionId,
						pNumber:this.keyword2
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					if(res.data.data.length > 0){
						let arr = []
						for(let item1 of res.data.data) {
							if(item1.xianggui != null && item1.xianggui != ''){
								let xiang = parseInt(item1.totalNum/item1.xianggui)
								let he = item1.totalNum-parseInt(item1.totalNum/item1.xianggui)*item1.xianggui
								item1.xianggui = xiang+'箱'+he+'盒'
							}
							arr.push(item1)
						}
						this.findgoodslist = arr
					} else {
						this.findgoodslist = []
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			findGoodsSum(){
				this.$http.post('/rest/toolStorageStock/findTotalBySpec',{
				},{
					params: {
						goodsId:this.goodsId,
						warehouseId:this.warehouseId2,
						areaId:this.areaId,
						positionId:this.positionId,
						pNumber:this.keyword2
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					if(res.data.data != null){
						this.goodsSum = res.data.data
						if(res.data.data.xianggui != null && res.data.data.xianggui != ''){
							let xiang = parseInt(res.data.data.totalNum/res.data.data.xianggui)
							let he = res.data.data.totalNum-parseInt(res.data.data.totalNum/res.data.data.xianggui)*res.data.data.xianggui
							this.goodsSum.xianggui = xiang+'箱'+he+'盒'
						}
					} else {
						this.goodsSum = {}
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			xuanzegoods(item){
				this.warehouseId2 = ''
				this.areaId = ''
				this.positionId = ''
				this.goodsId = item.id
				this.keyword2 = ''
				this.popupShow2 = false
				this.findGoodsSum()
				this.findGoodsList()
				this.listtype = 'goods'
			},
			search(){
				this.$http.post('/rest/storage/goodslist',{
				},{
					params: {
						condition:this.keyword
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					let arr = []
					let inta = 0
					for(let item1 of res.data.data) {
						if(inta != 10){
							arr.push(item1)
						} else {
							break
						}
						inta++
					}
					this.glist = arr
					this.popupShow2 = true
				})
			},
			search2(){
				this.goodsId = ''
				this.warehouseId2 = ''
				this.areaId = ''
				this.positionId = ''
				this.keyword = ''
				this.keyword2 = this.keyword2.toLocaleUpperCase()
				if(typeof this.keyword2 == 'undefined' || this.keyword2 == null || this.keyword2 == ""){
					uni.showToast({
						title: "请输入库位编号",
						icon: 'none'
					})
					return
				}
				this.findGoodsSum()
				this.findGoodsList()
				this.listtype = 'weizhi'
			},
			definexuanzecangku(e){
				this.warehouseId = e[0].value
				this.popupShow = false
				this.refresh()
			},
			xuanzecangku(){
				this.popupShow = true
			},
			sectionChange(e){
				this.current = e
			},
			refresh(){
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.post('/rest/toolStorageStock/findTotalBySpec',{
				},{
					params: {
						warehouseId: this.warehouseId
					},
					header: {
						'Authorization' :uni.getStorageSync('token'),
					}
				}).then(res => {
					if(res.data.data != ''){
						this.warehouseName = res.data.data.warehouseName
						this.totalStockVolume = res.data.data.totalStockVolume
						this.totalNum = res.data.data.totalNum
					} else {
						uni.showToast({
							title: "暂无库存数据",
							icon: 'none'
						})
					}
				})
				uni.hideLoading()
			},
		}
	};
</script>
<style lang="scss">
	.chen-icon {
	    position: absolute;
	    margin-left: 2%;
	    z-index: 1;//要害代码
	}
	.u-body-item {
		padding: 20rpx 15rpx;
	}
	.wrap {
		padding: 10rpx;
	}

	.u-row {
		margin: 10rpx 2rpx;
	}

	.demo-layout {
		height: 40rpx;
		border-radius: 8rpx;
		line-height: 40rpx;
	}
	.demo-layout2 {
		height: 165rpx;
		border-radius: 8rpx;
	}
	.demo-layout3 {
		height: 900rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: #ffffff;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}
	.weikaishi2{
		font-size: 32rpx;
	}
	.weikaishi3{
		font-size: 30rpx;
	}
	.weikaishi4{
		font-size: 25rpx;
	}
	.charts-box{
	  width: 100%;
	  height:300px;
	}
	.jiange{
		border-bottom: 1px solid #e1e1e1;
	}
</style>